<template>
  <div  class="layout">
    <div class="layout__left-warp">
      <ul>
        <li><a @click="jumpTo('/example/front-page')" >前言</a></li>
        <li><a @click="jumpTo('/example/dv-page')"  >dv-page</a></li>
        <li><a @click="jumpTo('/example/dv-box')" >dv-box</a></li>
        <li><a @click="jumpTo('/example/chart-desc')" >图表简介</a></li>
        <li><a @click="jumpTo('/example/dv-chart')" >dv-chart</a></li>
        <li><a @click="jumpTo('/example/dv-chart-line')" >dv-chart-line</a></li>
        <li><a @click="jumpTo('/example/dv-chart-bar')" >dv-chart-bar</a></li>
        <li><a @click="jumpTo('/example/dv-chart-pie')" >dv-chart-pie</a></li>
        <li><a @click="jumpTo('/example/dv-chart-ring')" >dv-chart-ring</a></li>
        <li><a @click="jumpTo('/example/dv-chart-radar')" >dv-chart-radar</a></li>
        <li><a @click="jumpTo('/example/dv-chart-cloud')" >dv-chart-cloud</a></li>
        <li><a @click="jumpTo('/example/dv-chart-map')" >dv-chart-map</a></li>
        <li><a @click="jumpTo('/example/extend-use')" >extend使用</a></li>
        <li><a @click="jumpTo('/example/dv-marquee')" >dv-marquee(滚动)</a></li>

      </ul>
    </div>
    <div class="layout__main-warp">
      <router-view></router-view>
    </div>
  </div> 
    
</template>
<script setup lang="ts" >
// import {DvBox, DvPage, DvChartPictorial} from '$comp/index';
import {router} from '@/routes/index'
const jumpTo = (path) => { 
  router.push({path: path})
}
</script>
<style lang="scss" scoped>
.layout{
  height: 100%;
  width: 100%;

  display: flex;
  flex-flow: row nowrap;
  

  &__left-warp{
    flex: 0 0 200px;
    height: 100%;
    margin-right: 10px;
    box-shadow: 1px 0px 10px #cccccc;
    a {
      cursor: pointer;
    }
  }

  &__main-warp{
    flex: 1;
    height: 100%; 
    overflow: auto;
  }

}
</style>